<template>
  <div id="examinpaper_manage_campus" class="container">
    <div class="content">
      <div class="panel">
        <div class="condition">
          <div class="row_one">
            <el-input
              v-model="tabledisplayObj.title"
              style="width:20%;float: left;margin-left:.1rem;"
              placeholder="输入试卷标题"
              class="input_search"
              clearable
            ></el-input>
            <div
              class="search_btn"
              style="margin-left:0.1rem;"
              @click="search()"
              v-if="hasApi('examinpaperList')"
            >搜索</div>
            <div
              class="btn_user_defined"
              style="margin-left:0.1rem;"
              @click="reset"
              v-if="hasApi('examinpaperList')"
            >重置</div>
            <div class="right_btn" @click="startExaminpaper" v-if="hasPage('107')">开始测评</div>
          </div>
        </div>
        <div>
          <table class="table" cellspacing="0" style="table-layout:fixed;">
            <thead class="thead">
              <tr>
                <td style="width: 1rem;">序号</td>
                <td style="width: 4rem;">试卷标题</td>
                <td style="width: 2rem;">适用年龄</td>
                <td style="width: 2rem;">上架状态</td>
                <td style="width: 2rem;">使用状态</td>
                <td style="width: 2rem;">已测评</td>
                <td style="width: 2rem;">测评中</td>
                <td style="width: 2rem;">创建时间</td>
                <td style="width: 2rem;">操作</td>
              </tr>
            </thead>
            <tbody class="tbody">
              <tr v-for="item,index in examinpaperList">
                <td>{{(index+1)+(tabledisplayObj.curPage-1)*tabledisplayObj.pageSize}}</td>
                <td>{{item.title}}</td>
                <td>{{item.ageStart}}-{{item.ageEnd}}岁</td>
                <td v-if="item.status == 0">未上架</td>
                <td v-else-if="item.status == 1">已上架</td>
                <td v-else>禁用</td>
                <td>{{item.reportCount+item.startCount > 0?"已使用":"未使用"}}</td>
                <td>{{item.reportCount}}</td>
                <td>{{item.startCount}}</td>
                <td>{{item.createTime}}</td>
                <td>
                  <span
                    class="operate_btn"
                    @click="preview_examinpaper(item)"
                    v-if="hasPage('105')"
                  >预览试卷</span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <el-pagination
          class="page"
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="tabledisplayObj.curPage"
          @size-change="pageSizeChange"
          @current-change="tabledisplayChangePage"
          :total="tabledisplayObj.total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
let vm;
let user;
export default {
  components: {},
  data() {
    return {
      tabledisplayObj: {
        total: 0,
        curPage: 1,
        pageSize: 10,
        status: 1,
        title: ""
      },
      examinpaperList: []
    };
  },
  methods: {
    reset() {
      vm.tabledisplayObj = {
        total: 0,
        curPage: 1,
        pageSize: 10,
        status: 1,
        title: ""
      };
      vm.initData();
    },
    search() {
      vm.tabledisplayObj.curPage = 1;
      vm.initData();
    },
    /**初始化数据 */
    initData() {
      api.examinpaperList(vm.tabledisplayObj).then(function(data) {
        if (data.resultCode == 2000) {
          vm.examinpaperList = data.list;
          vm.tabledisplayObj.total = data.totalCount;
        } else {
          vm.$message.error(data.message);
        }
      });
    },
    /**预览试卷 */
    preview_examinpaper(item) {
      var path = vm.$store.state.permit["105"].path;
      //传递参数
      this.$router.push({
        path: path,
        query: {
          paperId: item.paperId,
          isFromCampus: true
        }
      });
    },
    /**开始测评 */
    startExaminpaper() {
      var path = vm.$store.state.permit["107"].path;
      //传递参数
      this.$router.push({
        path: path
      });
    },
    /**页码回调 */
    pageSizeChange(val) {
      vm.tabledisplayObj.pageSize = val;
      vm.initData();
    },
    /**页数回调 */
    tabledisplayChangePage(val) {
      vm.tabledisplayObj.curPage = val;
      vm.initData();
    }
  },
  mounted() {
    vm = this;
    user = tool.getItem(lsKey.user, true); //得到当前用户信息
    //获取数据字典
    let dicdata = tool.getItem(lsKey.dict, true);
    vm.initData();
  }
};
</script>

<style lang="scss">
#examinpaper_manage_campus {
  .el-input__inner {
    border-radius: 0.08rem;
    font-size: 0.16rem;
    color: #666666;
    height: 0.36rem;
    line-height: 0.36rem;
  }
  .el-input__icon {
    line-height: 0.36rem;
  }

  .input_search {
    .el-input__inner {
      background-color: rgb(247, 248, 250);
    }
  }
  .right_btn {
    background-image: url(../../assets/img/clue_manage/add_white.png);
    width: 1.54rem;
    background-position: 0.28rem center;
    padding-left: 0.58rem;
  }
  .btn_user_defined {
    display: inline-block;
    width: 0.8rem;
    padding-left: 0.22rem;
    height: 0.36rem;
    line-height: 0.36rem;
    border-radius: 0.08rem;
    color: white;
    font-size: 0.16rem;
    font-weight: bold;
    cursor: pointer;
    letter-spacing: 0.03rem;
    background-color: #3885f8;
    position: relative;
    top: 0.01rem;
  }
  .btn_user_defined:hover {
    background-color: rgba(56, 133, 248, 0.8);
  }
}
</style>
<style scoped src="@/style/module/table.css"></style>
<style scoped src="@/style/clue_manage/clue_manage.css"></style>
<style scoped>
</style>